<template>
  <view class="s-icon" :class="c_class" :style="c_style" @click="handleClick">
    <image :style="huise ? 'filter: grayscale(100%);opacity:0.5' : ''" v-if="isImage" class="s-icon__image" :src="name"
      :mode="mode" />
    <!-- :style="'width:' + sizesuo + 'px;height:' + sizesuo + 'px'" -->
    <view v-if="huise" class="jiesuo" :class="sizesuo == '60' ? 'sizesuo' : ''">
      <image class="jiesuoimg" src="/static/jiesuo.png">
      </image>
    </view>
  </view>
</template>

<script>
import componentMixin from '../../mixins/componentMixin';

/**
 * s-icon 图标
 * @description s-icon 图标
 * @property {String} classPrefix 类名前缀，用于使用自定义图标
 * @property {String} name 图标名称或图片链接
 * @property {Number|String} size 图标大小，默认单位为rpx
 * @property {String} color 图标颜色
 * @property {String} mode = [scaleToFill|aspectFill|widthFix] 图片裁剪、缩放的模式
 * @property {String|Number} width  图片宽度
 * @property {String|Number} height 图片高度
 * @event {Function} click 点击事件
 * @example <s-icon name="love" size="40" />
 */
export default {
  name: 'SIcon',
  mixins: [componentMixin],
  props: {
    huise: {
      type: Boolean,
      default: false,
    },
    classPrefix: {
      type: String,
      default: 's-icon',
    },
    name: String,
    sizesuo: [Number, String],
    size: [Number, String],
    color: String,
    mode: {
      type: String,
      default: 'scaleToFill',
    },
    width: [Number, String],
    height: [Number, String],
  },
  computed: {
    isImage() {
      return String(this.name).indexOf('/') !== -1;
    },
    c_class() {
      const classPrefix = this.classPrefix || 's-icon';
      return this.$mergeClass({
        [classPrefix]: !this.isImage && classPrefix !== 's-icon',
        [`${classPrefix}-${this.name}`]: !this.isImage,
      }, this.custom_class);
    },
    c_style() {
      return this.$mergeStyle({
        width: this.$addUnit(this.width),
        height: this.$addUnit(this.height),
        fontSize: this.$addUnit(this.size),
        color: this.color,
      }, this.custom_style);
    },
  },
  methods: {
    handleClick(e) {
      this.$emit('click', e);
    },
  },
};
</script>

<style lang="scss" >
.sizesuo {
  // width: 70rpx !important;
  // height: 70rpx !important;
  bottom: 80rpx !important;
  right: 40rpx !important;
}

.tishi {
  font-size: 20rpx;
  text-align: center;
  margin-top: 10rpx
}

.jiesuo {
  width: 40rpx;
  height: 40rpx;
  font-size: 30rpx;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  color: white;
  right: -10rpx;
  bottom: 0rpx;
  position: absolute;
}

.jiesuoimg {
  width: 20rpx;
  height: 20rpx;
  display: block;
  margin: 0 auto;
  margin-top: 50%;
  transform: translateY(-50%);
  // margin-top: 11rpx;
}
</style>
<style lang="scss" src="./index.scss"></style>
